import React, { Component } from "react"
import { observer, inject } from "mobx-react"
import { Link, withRouter } from "react-router-dom"
import cssModules from "react-css-modules"
import { Row, Col } from "antd"
import More from "../More"
import ScreenModal from "../ScreenModal"
import ModalContent from "../Module/components/ModalContent/index.js"
import { toJS } from "mobx"
import Bluebird from "bluebird"
import TrendChart from "./chart"

import { isEqual } from "lodash"
import styles from "./index.less"

@inject("ScreenStore")
@observer
@cssModules(styles)
class Battery extends Component {
  constructor(props) {
    super(props)

    this.store = this.props.ScreenStore
  }
  state = { temperatures: [], data: [] }

  handleClick = async () => {
    const { confim, getDayChart, setDayChart } = this.store
    const temperatures = this.state.temperatures
    confim("freshAir")
    const data = await Bluebird.map(temperatures, async (item) => {
      let res = await getDayChart({
        deviceId: item.deviceId,
        spId: item.spId,
      })
      return res
    })
    if (data[0]) {
      setDayChart(data)
    }
  }
  componentWillMount() {
    const { getEnvironment } = this.store
    getEnvironment()
  }
  componentDidMount() {
    const { environment } = this.store
    let data = (environment && environment.environments) || []
    const temperatures = toJS(data).filter((item) => {
      return item.type === "temperature"
    })
    if (temperatures[0]) {
      this.setState({
        temperatures: temperatures,
      })
    }
  }
  componentDidUpdate(props, state) {
    const { environment } = this.store
    let data = (environment && environment.environments) || []
    const temperatures = toJS(data).filter((item) => {
      return item.type === "temperature"
    })
    const isSame = isEqual(toJS(temperatures), this.state.temperatures)
    if (isSame) return

    if (temperatures[0]) {
      this.setState({
        temperatures,
      })
    }
  }
  render() {
    const { environment } = this.store
    let data = (environment && environment.environments) || []

    return (
      <div styleName="container">
        <div styleName={"title-container"}>
          <div styleName={"title-selected"} />
          <div styleName={"title"}>自洁新风系统</div>
        </div>
        <Row
          type="flex"
          justify="space-between"
          styleName={"ac-input-data"}
          align="bottom"
        >
          {data
            .filter((item, i) => {
              return item.show
            })
            .map((item, i) => {
              const value =
                ((item.enums || {}).hasOwnProperty(item.value) &&
                  item.enums[item.value]) ||
                item.value
              return (
                <Col span={12} key={i.toString(36) + i}>
                  <div styleName={"item"}>
                    <span styleName={"title"}>{item.spName + ":"}</span>
                    <span styleName={"value"}>
                      {item.value ? value + item.unit : "-"}
                    </span>
                  </div>
                </Col>
              )
            })}
        </Row>
        <More handleClick={this.handleClick} />
        <ScreenModal
          type={"freshAir"}
          className={styles["modal-wrap"]}
          title={"自洁新风系统"}
        >
          <div className={styles["content"]}>
            <ModalContent data={data} />
            <TrendChart
              data={this.state.data}
              temperatures={this.state.temperatures}
            />
          </div>
        </ScreenModal>
      </div>
    )
  }
}

export default Battery
